<template>
    <div class="xuexiziliao-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title"> 添加学习资料</span>
            </div>
            <div class="form-database-form">
                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <el-form-item label="资料编号" prop="ziliaobianhao" :rules="[{required:true, message:'请填写资料编号'}]">
                        <el-input type="text" placeholder="输入资料编号" style="width: 250px" v-model="form.ziliaobianhao" />
                    </el-form-item>

                    <el-form-item
                        label="资料名称"
                        prop="ziliaomingcheng"
                        required
                        :rules="[{required:true, message:'请填写资料名称'}, {validator:rule.checkRemote, message:'内容重复了', checktype:'insert', module:'xuexiziliao', col:'ziliaomingcheng', trigger:'blur'}]"
                    >
                        <el-input type="text" placeholder="输入资料名称" style="width: 450px" v-model="form.ziliaomingcheng" />
                    </el-form-item>

                    <el-form-item label="资料类型" prop="ziliaoleixing" required :rules="[{required:true, message:'请填写资料类型'}]">
                        <el-select v-model="form.ziliaoleixing"
                            ><e-select-option type="option" module="ziliaoleixing" value="id" label="leixingmingcheng"></e-select-option
                        ></el-select>
                    </el-form-item>

                    <el-form-item label="专业" prop="zhuanye" required :rules="[{required:true, message:'请填写专业'}]">
                        <el-input type="text" placeholder="输入专业" style="width: 250px" v-model="form.zhuanye" />
                    </el-form-item>

                    <el-form-item label="资料图片" prop="ziliaotupian"> <e-upload-image v-model="form.ziliaotupian"></e-upload-image> </el-form-item>

                    <el-form-item label="资料附件" prop="ziliaofujian"> <e-upload-file v-model="form.ziliaofujian"></e-upload-file> </el-form-item>

                    <el-form-item label="资料内容" prop="ziliaoneirong"> <e-editor v-model="form.ziliaoneirong"></e-editor> </el-form-item>

                    <el-form-item label="发布人" prop="faburen"> <el-input v-model="form.faburen" readonly style="width: 250px"></el-input> </el-form-item>

                    <el-form-item v-if="btnText">
                        <el-button type="primary" @click="submit">{{ btnText }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .xuexiziliao-add {
    }
</style>
<script>
    import api from "@/api";
    import rule from "@/utils/rule";
    import { extend } from "@/utils/extend";

    export default {
        name: "xuexiziliao-add",
        data() {
            return {
                rule,
                loading: false,
                form: {
                    ziliaobianhao: rule.getID(),
                    ziliaomingcheng: "",
                    ziliaoleixing: "",
                    zhuanye: "",
                    ziliaotupian: "",
                    ziliaofujian: "",
                    ziliaoneirong: "",
                    faburen: this.$store.state.user.session.username,
                },
            };
        },
        watch: {},
        props: {
            isRead: {
                type: Boolean,
                default: true,
            },
            btnText: {
                type: String,
                default: "提交",
            },
        },

        computed: {},
        methods: {
    submit() {
        this.$refs.formModel//通过$refs属性引用的名为formModel的组件实例或DOM元素。
            .validate()
            .then((res) => {
                // 表单验证通过
                if (this.loading) return; // 如果正在加载，直接返回
                this.loading = true; // 设置加载状态为true
                var form = this.form; // 获取表单数据

                this.$post(api.xuexiziliao.insert, form) // 发起POST请求
                    .then((res) => {
                        this.loading = false; // 加载完成，设置加载状态为false
                        if (res.code == api.code.OK) {
                            // 请求成功
                            this.$message.success("添加成功"); // 显示成功提示消息
                            this.$emit("success", res.data); // 触发成功事件，传递返回的数据
                            this.$refs.formModel.resetFields(); // 重置表单字段
                            this.loadInfo(); // 加载信息
                        } else {
                            // 请求失败
                            this.$message.error(res.msg); // 显示失败提示消息
                        }
                    })
                    .catch((err) => {
                        // 请求出错
                        this.loading = false; // 加载完成，设置加载状态为false
                        this.$message.error(err.message); // 显示错误提示消息
                    });
            })
            .catch((err) => {
                // 表单验证失败
                console.log(err.message); // 打印错误消息
            });
    },
            loadInfo() {
                var form = this.form;
                // 获取模块得数据
                this.loading = true;
                this.$post(api.xuexiziliao.create, {
                    id: this.$route.query.id,
                })
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                            this.$router.go(-1);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.message);
                        this.$router.go(-1);
                    });
            },
        },
        created() {
            this.loadInfo();
        },
        mounted() {},
        destroyed() {},
    };
</script>
